<template>
  <div>
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/education/educationHome')"
        >
          教育培训
        </a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/education/oLcurriculumList')"
        >
          在线课程
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #ffbe37">确认订单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div v-html="Alipay"></div>

    <div class="autn">
      <span class="titleTxt1">确认订单信息</span>
      <div class="grey">
        <div class="dlex1-div">
          <div class="yellowBar"></div>
          <span class="titleTxt2">商品信息</span>
        </div>
        <div
          class="dlex3-div"
          v-for="(item, index) in commodity.commList"
          :key="index"
        >
          <img class="dlex_img" :src="imageWebUrl + item.cover" alt="" />
          <div class="dlex_introduce">
            <span>{{ item.name }}</span>
            <p>来源：{{ item.source }}</p>
          </div>
          <div class="price">
            <span class="redTxt">￥</span>
            <span class="redTxt" style="font-size: 32px">{{
              item.originalPrice
            }}</span>
          </div>
        </div>
        <span class="tip"
          >*您购买的商品为虚拟内容，购买后不支持退订、转让、退换。</span
        >
      </div>
      <!-- <div class="grey">
        <div class="dlex1-div">
          <div class="yellowBar"></div>
          <span class="titleTxt2">发票信息</span>
        </div>
        <div class="dlex3-div">
          <span class="tip">*发票</span>
          <div style="margin-left: 32px">
            <a-radio-group v-model="value" @change="onChange">
              <a-radio :value="1"> 无需要发票 </a-radio>
              <a-radio :value="2"> 电子发票 </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="dlex_radio">
          <a-radio-group v-model="invoiceCode" @change="onChange">
            <div class="dio">
              <a-radio :value="1">
                <span
                  >个人 / 北京华夏远道科技又下你公司 / 213123123123 /
                  1234121@qq.com</span
                >
              </a-radio>
            </div>
            <div>
              <a-radio :value="2">
                <span
                  >个人 / 北京华夏远道科技又下你公司 / 213123123123 /
                  1234121@qq.com</span
                >
              </a-radio>
            </div>
          </a-radio-group>
        </div>
        <a-button @click="showModal" class="introduce_btn">
          <img src="@/assets/image/icon_add.png" alt="" /> 添加发票信息
        </a-button>
      </div> -->
      <div class="grey">
        <div class="dlex1-div">
          <div class="yellowBar"></div>
          <span class="titleTxt2">支付方式</span>
        </div>
        <div class="dlex3-div">
          <div class="dlex_txt" :class="{ select: selBorder }">
            <span @click="selpayment(true)">支付宝</span>
          </div>
          <div
            class="dlex_txt"
            :class="{ select: !selBorder }"
            style="margin-left: 64px"
          >
            <span @click="selpayment(false)">微信</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
    <div class="autn">
      <div class="at_rignt">
        <div class="price">
          <span class="sobtn">应付金额</span>
          <span class="redTxt">￥</span>
          <span class="redTxt" style="font-size: 32px">{{
            commodity.totalPrice
          }}</span>
        </div>
        <div class="dlex2-div">
          <img
            v-if="selvalue"
            class="dlex_img2"
            @click="selagree()"
            src="@/assets/image/icon_y.png"
            alt=""
          />
          <img
            v-else
            class="dlex_img2"
            @click="selagree()"
            src="@/assets/image/icon-true.png"
            alt=""
          />
          <span class="greyBlue">我已阅读并同意<a>《用户付费协议》</a></span>
          <a-button
            :loading="iconLoading"
            class="dlex_btn"
            @click="immediatePayment()"
            type="primary"
          >
            立即支付
          </a-button>
        </div>
      </div>
    </div>
    <!-- <div>
      <a-modal v-model="visible" title="添加发票信息" @ok="handleOk()">
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleSubmit"
        >
          <a-form-item label="抬头类型：">
            <a-select
              v-decorator="[
                'invoiceType',
                {
                  rules: [{ required: true, message: '请选择抬头类型' }],
                },
              ]"
              placeholder="请选择发票类型"
              @change="handleSelectChange"
            >
              <a-select-option value="02"> 企业 </a-select-option>
              <a-select-option value="01"> 个人 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="发票抬头：">
            <a-input
              v-decorator="[
                'invoiceHead',
                {
                  rules: [
                    { required: true, message: '请填写发票抬头!' },
                    {
                      pattern: /^[0-9a-zA-Z\(\)\（\）\u4e00-\u9fa5]{0,50}$/,
                      message: '请填写发票抬头',
                    },
                  ],
                },
              ]"
              placeholder="发票一经开出，不予退换"
            />
          </a-form-item>
          <a-form-item label="识别号：" v-if="formFlag">
            <a-input
              v-decorator="[
                'identificNumber',
                { rules: [{ required: true, message: '请填写识别号！' }] },
                {
                  pattern:
                    /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
                  message: '请填写正确识别号！',
                },
              ]"
              placeholder="请填写识别号"
            />
          </a-form-item>
          <a-form-item label="邮箱：">
            <a-input
              v-decorator="[
                'drawerEmail',
                {
                  rules: [
                    { required: true, message: '请填写邮箱' },
                    {
                      pattern:
                        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
                      message: '请输入正确的邮箱',
                    },
                  ],
                },
              ]"
              placeholder="请填写识别号"
            />
          </a-form-item>
          <a-form-item label="开户银行：" v-if="formFlag">
            <a-input
              v-decorator="[
                'openBanck',
                {
                  rules: [{ required: false, message: '请填写开户银行' }],
                },
              ]"
              placeholder="请填写识开户银行"
            />
          </a-form-item>
          <a-form-item label="银行账号：" v-if="formFlag">
            <a-input
              v-decorator="[
                'bankAccount',
                {
                  rules: [{ required: false, message: '请填写正确银行账号！' }],
                },
                {
                  pattern: /^([1-9]{1})(\d{14,18})$/,
                  message: '请填写正确的银行账号！',
                },
              ]"
              placeholder="请填写银行账号"
            />
          </a-form-item>
          <a-form-item label="备注：" v-if="formFlag">
            <a-input
              v-decorator="[
                'invoiceDescr',
                {
                  rules: [{ required: false, message: '' }],
                },
              ]"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit"> Submit </a-button>
          </a-form-item>
        </a-form>
      </a-modal>
      <a-spin v-if="dasflag" tip="加载中..."> </a-spin>
    </div> -->
  </div>
</template>
<script>
export default {
  mounted() {
    // 查看订单信息
    this.selOrderdata(this.orderNumber);
  },
  data() {
    return {
      // zhifu
      Alipay: null,
      value: 1,
      invoiceCode: 1,
      selBorder: true,
      selvalue: true,
      // 商品展示信息
      commodity: {},
      dasflag: true,
      // 表单内操作
      visible: false,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      // 控制表单内选项
      formFlag: true,
      iconLoading: false,
      // 生成的订单
      order: {
        invoiceFlag: "01", //是否开票 01.无需发票 02.电子发票
        orderType: "01", //订单类型 01.课程 02.商城
        payStatus: "01", //	付款状态 01.待付款 02.待发货 03.已发货 04.已完成 05.已关闭
        payType: "02", //支付方式 01.微信 02.支付宝
        totalPrice: null, //实付款
      },
      // 商品信息数组
      orderCommodJson: [
        {
          commodNo: this.$route.query.courseNo, //课程编码
          originalPrice: null, //"原价"
          quantity: 1, //数量
          discount: 0, //优惠
          unit: 1, //单位
        },
      ], //商品json
      // 订单号
      orderNumber: this.$route.query.orderNo,
    };
  },
  methods: {
    // 对话框中的内容
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      // console.log(e);
      this.visible = false;
    },

    onChange(e) {
      // console.log("radio checked", e.target.value);
      if (e.target.value == 1) {
        this.order.invoiceFlag = "01";
      } else {
        this.order.invoiceFlag = "02";
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log("Received values of form: ", values);
        }
      });
    },
    handleSelectChange(value) {
      if (value != "01") {
        this.form.invoiceType = value;
        this.order.invoiceFlag = "02";
        this.formFlag = true;
      } else {
        this.form.invoiceType = value;
        this.order.invoiceFlag = "01";
        this.formFlag = false;
      }
      // console.log(this.form.invoiceType);
    },
    // 同意/拒绝支付协议
    selagree() {
      this.selvalue = !this.selvalue;
    },
    // 选中该支付方式
    selpayment(e) {
      this.selBorder = e;
      if (e) {
        // 支付宝
        this.order.payType = "02";
      } else {
        // 微信
        this.order.payType = "01";
      }
    },
    // 接口部分
    // 查询订单详情
    selOrderdata(e) {
      this.onLoading = true;
      this.$ajax({
        url: "/order/order/get",
        method: "post",
        params: {
          orderNo: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.commodity = res.data;
          if (res.data.invoiceFlag == "01") {
            this.selBorder = false;
          }else{
            this.selBorder = true;

          }
        } else {
          this.commodity = res.data;
        }
      });
    },
    // 立即支付
    immediatePayment() {
      // 首先判断用户是否统一支付协议
      if (this.selvalue) {
        this.$message.error("请同意并勾选用户支付协议");
        return;
      }
      this.iconLoading = true;
      this.$message.success("正在生成订单");
      // 判断用户选择的付款方式
      if (this.selBorder) {
        // 跳转支付宝付款页
        this.getAlipay(this.orderNumber);
      } else {
        // 跳转微信付款页
        this.$router.push("/order/Wechat?id=" + this.orderNumber);
      }
    },
    // 生成支付宝订单
    getAlipay(e) {
      this.$ajax({
        url: "/order/alipay/alipaycode?orderId=" + e,
        method: "POST",
        params: {},
      }).then((res) => {
        this.Alipay = res;
        this.$nextTick(() => {
          document.forms[0].submit();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.autn {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 40px;
  .grey {
    width: 1200px;
    background: #f8f8f8;
    margin-top: 20px;
    padding: 40px 30px;
    .dlex1-div {
      padding-bottom: 8px;
      border-bottom: 1px solid #eeeeee;
    }
    .dlex3-div {
      margin-top: 17px;
      margin-bottom: 24px;
    }
    .dlex_img {
      flex-shrink: 0;
      width: 144px;
      height: 81px;
    }

    .select {
      background-image: url("~@/assets/image/sexback.png");
      background-size: 100% 100%;
      border: none !important;
    }
    .dlex_txt {
      width: 140px;
      height: 44px;
      cursor: pointer;
      border: 1px solid #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 16px;
        font-family: PingFang SC;
        justify-content: center;
        color: #333333;
      }
    }
    .dlex_introduce {
      margin-left: 32px;
      flex: 1;
      span {
        display: block;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-top: 8px;
      }
      p {
        font-size: 15px;
        font-family: PingFang SC;
        color: #666666;
        margin-top: 16px;
      }
    }
    .price {
      overflow: hidden;
      margin-top: 19px;
      text-align: right;
    }
  }
  .at_rignt {
    float: right;
    padding: 16px 0;
    text-align: right;
  }
}
.dlex_radio {
  margin-bottom: 29px;
  span {
    font-size: 14px;
    font-family: PingFang SC;
    color: #333333;
  }
  .dio {
    margin-bottom: 20px;
  }
}
.tip {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ca0000;
  line-height: 17px;
}
// 按钮样式
.introduce_btn {
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(255, 190, 55, 0.1);
  font-family: PingFang SC;
  color: #232d32;
  line-height: 20px;
  img {
    width: 12px;
    margin-right: 4px;
  }
}
.bottom {
  width: 100%;
  height: 20px;
  background: #f8f8f8;
}
.sobtn {
  background-color: #ffffff;
  margin-right: 8px;
}
.greyBlue {
  font-size: 14px;
}
.dlex2-div {
  margin-top: 16px;
}
.dlex_img2 {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  cursor: pointer;
}
.dlex_btn {
  width: 120px;
  height: 40px;
  margin-left: 10px;
}

.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  // padding: 30px;
}
/deep/.ant-spin {
  width: 100%;
  height: 100%;
}
</style>